<template>
  <div class="viewList">
    <div class="zhedie1">
      <h2>点检详情</h2>
      <span class="span1">绿色:已完成</span>
      <el-table
        :data="dl"
        style="width: 100%"
        border
        :cell-style="tableColor"
        :header-cell-style="{ background: 'rgb(64, 158, 255)', color: '#fff' }"
      >
        <el-table-column prop="cdxjaCheck" label="穿灯芯机(A)">
        </el-table-column>
        <el-table-column prop="cdxjbCheck" label="穿灯芯机(B)">
        </el-table-column>
        <el-table-column prop="cmtbjCheck" label="侧面贴标机">
        </el-table-column>
        <el-table-column prop="dmtbjCheck" label="底面贴标机">
        </el-table-column>
        <el-table-column prop="dryhlCheck" label="导热油化蜡">
        </el-table-column>
      </el-table>
      <el-table
        :data="dl"
        style="width: 100%"
        border
        :cell-style="tableColor"
        :header-cell-style="{ background: 'rgb(64, 158, 255)', color: '#fff' }"
      >
        <el-table-column prop="flzjaCheck" label="放蜡柱机1"> </el-table-column>
        <el-table-column prop="flzjbCheck" label="放蜡柱机2"> </el-table-column>
        <el-table-column prop="fpgzjCheck" label="发泡灌装机">
        </el-table-column>
        <el-table-column prop="fpjCheck" label="发泡机"> </el-table-column>
        <el-table-column prop="gzfxjCheck" label="工字封箱机">
        </el-table-column>
      </el-table>
      <el-table
        :data="dl"
        style="width: 100%"
        border
        :cell-style="tableColor"
        :header-cell-style="{ background: 'rgb(64, 158, 255)', color: '#fff' }"
      >
        <el-table-column prop="lxtsxaCheck" label="螺旋提升线1">
        </el-table-column>
        <el-table-column prop="lxtsxbCheck" label="螺旋提升线2">
        </el-table-column>
        <el-table-column prop="wdxeCheck" label="网带线二"> </el-table-column>
        <el-table-column prop="wdxezdsxCheck" label="网带线二自动上线">
        </el-table-column
        ><el-table-column prop="wdxezdxxCheck" label="网带线二自动下线">
        </el-table-column>
      </el-table>
      <el-table
        :data="dl"
        border
        style="width: 100%"
        :cell-style="tableColor"
        :header-cell-style="{ background: 'rgb(64, 158, 255)', color: '#fff' }"
      >
        <el-table-column prop="wdxyCheck" label="网带线一"> </el-table-column
        ><el-table-column prop="wdxezdsxCheck" label="网带线二自动上线">
        </el-table-column
        ><el-table-column prop="wdxyzdxxCheck" label="网带线一自动下线">
        </el-table-column
        ><el-table-column prop="ylzjaCheck" label="压蜡柱机(A)">
        </el-table-column
        ><el-table-column prop="ylzjbCheck" label="压蜡柱机(B)">
        </el-table-column>
      </el-table>
      <el-table
        :data="dl"
        border
        style="width: 100%"
        :cell-style="tableColor"
        :header-cell-style="{ background: 'rgb(64, 158, 255)', color: '#fff' }"
      >
        <el-table-column prop="yrzCheck" label="预热罩"> </el-table-column
        ><el-table-column prop="yzfxjCheck" label="一字封箱机">
        </el-table-column
        ><el-table-column prop="zdsxCheck" label="自动上线"> </el-table-column
        ><el-table-column prop="zlaCheck" label="制冷机组1"> </el-table-column
        ><el-table-column prop="zlbCheck" label="制冷机组2"> </el-table-column
      ></el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "dianjianXq",
  data() {
    return {
      dl: [],
    };
  },
  created() {
    this.viewList();
  },
  methods: {
    // zhedie() {
    //   if (!this.$refs.zhedie.style.width) {
    //     this.$refs.zhedie.style.width = "100%";
    //     this.$refs.zhedie2.style.visibility = "hidden";
    //   } else {
    //     if (this.$refs.zhedie.style.width === "100%") {
    //       this.$refs.zhedie.style.width = "50%";
    //       this.$refs.zhedie2.style.visibility = "visible";
    //       console.log(this.$refs.zhedie.style.width, 222);
    //     } else if (this.$refs.zhedie.style.width === "50%") {
    //       this.$refs.zhedie.style.width = "100%";
    //       this.$refs.zhedie2.style.visibility = "hidden";
    //     }
    //   }
    // },
    tableColor({ row, column }) {
      if (column.label === "穿灯芯机(A)") {
        if (row.cdxjaCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "穿灯芯机(B)") {
        if (row.cdxjbCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "侧面贴标机") {
        if (row.cmtbjCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "底面贴标机") {
        if (row.dmtbjCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "导热油化蜡") {
        if (row.dryhlCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "放蜡柱机1") {
        if (row.flzjaCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "放蜡柱机2") {
        if (row.flzjbCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "发泡灌装机") {
        if (row.fpgzjCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "发泡机") {
        if (row.cdxjbCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "工字封箱机") {
        if (row.gzjCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "螺旋提升线1") {
        if (row.lxtsxaCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "螺旋提升线2") {
        if (row.lxtsxbCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "网带线二") {
        if (row.wdxeCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "网带线二自动上线") {
        if (row.wdxezdsxCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "网带线二自动下线") {
        if (row.wdxezdxxCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "网带线一") {
        if (row.wdxyCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "网带线二自动上线") {
        if (row.wdxyzdxxCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "网带线一自动下线") {
        if (row.ylzjaCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "压蜡柱机(A)") {
        if (row.cdxjbCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "压蜡柱机(B)") {
        if (row.ylzjbCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "预热罩") {
        if (row.yrzCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "一字封箱机") {
        if (row.yzfxjCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "自动上线") {
        if (row.zdsxCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "制冷机组1") {
        if (row.zlaCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      } else if (column.label === "制冷机组2") {
        if (row.zlbCheck === "已完成") {
          return "background-color:#58d88e;color:#fff";
        }
      }
    },
    viewList() {
      this.dl = this.$store.state.dianjianList.dianjianList;
      console.log(this.dl, 1111);
      let a = {};
      console.log(Object.prototype === a.__proto__);
    },
  },
};
</script>

<style>
.viewList {
  width: 100%;
  height: 100%;
}
.zhedie1 {
  margin-right: 30px;
  margin-left: 30px;
}
/* .zhedie1 {
  float: left;
  width: 50%;
}
.zhedie2 {
  margin: 36px 0;
  float: right;
  width: 50%;
} */
.span1 {
  float: right;
  color: #58d88e;
}
</style>
